<template>
    <div id="login" class="login_container">
        <div class="login_box" @keyup.enter="login">
            <!--logo-->
            <div class="avatar_box">
                <img src="../../assets/logo.png" alt="">
                <div style="width: 500%; margin-left: -100%;"><i>Welcome to use Donald Framework!</i></div>
            </div>
            <!--登录表单-->
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
                <!--用户名-->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item  prop="password">
                    <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item  prop="captcha">
                    <div class="captcha">
                        <el-input v-model="loginForm.captcha" placeholder="验证码"></el-input>
                        <img :src="'data:image/jpeg;base64,'+preLogin.img" @click="getCaptcha" alt="">
                    </div>
                </el-form-item>
                <!--按钮-->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                preLogin:{
                  captchaToken:null,
                  img:null
                },
                loginForm:{
                    captchaToken:null,
                    username:null,
                    password:null,
                    captcha:null
                },
                loginFormRules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 4, max: 16, message: '用户名4到16位', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, message: '密码最小6位', trigger: 'blur' }
                    ],
                    captcha: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                        { min: 4, max: 4, message: '请输入4位验证码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            reset(){
                /*重置表单*/
                this.$refs.loginFormRef.resetFields();
            },
            login(){
                /*表单验证*/
                this.$refs.loginFormRef.validate(async valid =>{
                    this.getCaptcha();
                    //console.log(valid);
                    if (!valid)return;
                    const resp = await this.$http.post("/system/login",this.loginForm);
                    const data = resp.data;
                    if (data.code===200){
                        this.$message.success('登录成功');
                        window.sessionStorage.setItem("authorization",data.data.authorization);
                        window.sessionStorage.setItem("userName",data.data.userName);
                        window.sessionStorage.setItem("userId",data.data.userId);
                        await this.$router.push("/");
                    }else {
                        this.$message({
                            showClose: true,
                            message: data.info,
                            type: 'error'
                        });
                    }
                })
            },
            async getCaptcha() {
                const resp = await this.$http.get("/system/getCaptcha");
                const data = resp.data;
                if (data.code === 200){
                    this.preLogin = data.data;
                    this.loginForm.captchaToken = data.data.captchaToken;
                }else {
                    this.$message.error(data.info);
                }
            }
        },
        created(){
            this.getCaptcha();
        }
    }
</script>

<style lang="less" scoped>
    .login_container{
        background-color: #81ccdf;
        height: 100%;
    }
    .login_box{
        width: 450px;
        height: 300px;
        background-color: white;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        right: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        .avatar_box{
            height: 100px;
            width: 90px;
            border: 1px solid #eeeeee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #dddddd;
            position: absolute;
            left: 60%;
            transform: translate(-100%,-170%);
            background-color: #f6f4ff;
            img {
                transform: translate(-5%,-20%);
                width: 130%;
                height: 130%;
                border-radius: 50%;
            }
        }
        .btns{
            display: flex;
            justify-content: flex-end;
        }
        .login_form{
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 40px;
            box-sizing: border-box;
        }
        .captcha{
            display: flex;
            el-input{
                width: 50%;
            }
            img{
                padding-left: 10px;
                width: 50%;
                height: 40px;
            }
        }
    }
</style>
